<template>
<div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
mounted(){
	let myChart = echarts.init(this.$refs.myChart)
	//2.设置数据
	let Xdata= ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
	let dataA = [130,25,234,164,89,189,78]
	let dataB = [80,65,24,64,55,19,78]
	let dataC = [80,75,44,14,99,59,48]
	let dataD = [90,50,84,84,89,189,38]
	//3.配置项
	let option = {
		xAxis:{
			type:'category',
			data:Xdata
		},
		yAxis:{
			type:'value'
		},
		series:[
		// 	{
		// 	type:'line',//折线图
		// 	data,
		// 	smooth:true,//开启平滑过渡
		// 	areaStyle:{},
		// 	markPoint:{
		// 		data:[
		// 			{type:'max',name:'最大值'},
		// 			{type:'min',name:'最小值'}
		// 		]
		// 	},
		// 	markLine:{
		// 		data:[
		// 			{type:'average',name:'平均值'}
		// 		]
		// 	}
		// }
 {
		name:'美食',
		type:'line',
		//数据堆叠
		stack:'num',//同类型的数据需要匹配相同的stack值
		data:dataA,
		//样式填充
		areaStyle:{},
		emphasis:{
				focus:'series',//聚焦当前的区域高亮
			}
	},
	{
		name:'日化',
		type:'line',
		//数据堆叠
		stack:'num',//同类型的数据需要匹配相同的stack值
		data:dataB,
		areaStyle:{},
		emphasis:{
				focus:'series',//聚焦当前的区域高亮
			}
	},
	{
		name:'数码',
		type:'line',
		//数据堆叠
		stack:'num',//同类型的数据需要匹配相同的stack值
		data:dataC,
		areaStyle:{},
		emphasis:{
				focus:'series',//聚焦当前的区域高亮
			}
	},
	{
		name:'蔬菜',
		type:'line',
		//数据堆叠
		stack:'num',//同类型的数据需要匹配相同的stack值
		data:dataD,
			areaStyle:{},
			//选中高亮状态
			emphasis:{
				focus:'series',//聚焦当前的区域高亮
			}
	}

		]
	}
 //4.设置配置项
	myChart.setOption(option)
	//监听页面大小的改变
	window.addEventListener('resize',()=>{
		myChart.resize()
	})
}
}
</script>
<style scoped>
#myChart{
	width: 100%;
	height: 500px;
	border:1px solid red;
}
</style>
